import {
  Button,
  Descriptions,
  DescriptionsItem,
  Divider,
  FormItem,
  Image,
  ImagePreviewGroup,
  message,
  Radio,
  RadioGroup,
  Space,
  Spin,
  TypographyText,
  TypographyTitle
} from 'ant-design-vue'
import { defineComponent, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'

import { riverApi } from '@/apis'
import { WithdrawDetail } from '@/apis/riverTypes'
import { useBack } from '@/hooks/useBack'
import { useDialog } from '@/hooks/useDialog'
import { formatDate, optionsToMap } from '@/utils'

import { billTypeOptions, paymentOptions } from '../constants'
import FinanceRejectDialog from './components/FinanceRejectDialog'

export default defineComponent({
  name: 'RvFinanceBillDetail',
  setup() {
    const route = useRoute()
    const data = ref({} as WithdrawDetail)
    const loading = ref(false)
    const isPreview = ref(false)
    const rejectDlgRef = ref(null)
    const id = Number(route.query.id)
    const { showConfirm } = useDialog()
    const { handleCancel } = useBack('refreshWidthdrawList')
    onMounted(() => {
      getDetail()
    })

    //获取详情
    async function getDetail() {
      try {
        loading.value = true
        if (route.query.isHistory) {
          data.value = await riverApi.getHistoryDetail(id)
        } else {
          data.value = await riverApi.getWidthdrawDetail(id)
        }
      } finally {
        loading.value = false
      }
    }

    //驳回
    function handleReject() {
      //@ts-ignore
      rejectDlgRef.value.open(id)
    }

    function handleRejectConfirm() {
      handleCancel()
      message.success('操作完成')
    }

    //审核
    function handlePass() {
      showConfirm({
        content: '是否确认通过审核？',
        onOk: async () => {
          try {
            await riverApi.batchAgree([id])
            handleCancel()
            message.success('操作完成')
          } finally {
          }
        }
      })
    }

    //确认签收
    function handleReceive() {
      showConfirm({
        content: '是否确认签收发票？',
        onOk: async () => {
          try {
            await riverApi.batchSignReceive([id])
            handleCancel()
            message.success('操作完成')
          } finally {
          }
        }
      })
    }

    //保存打款未打款状态
    function handleSave() {
      showConfirm({
        content: '是否保存打款状态？',
        onOk: async () => {
          try {
            await riverApi.savePayStatus(id, data.value.isPay)
            handleCancel()
            message.success('操作完成')
          } finally {
          }
        }
      })
    }

    return {
      data,
      loading,
      isPreview,
      rejectDlgRef,
      handleReject,
      handlePass,
      handleRejectConfirm,
      handleReceive,
      handleSave
    }
  },
  render() {
    return (
      <Spin spinning={this.loading}>
        <Space>
          <TypographyTitle level={3}>提现结算详情</TypographyTitle>
          <TypographyText v-show={this.data.status == 4} strong type="warning">
            待审核
          </TypographyText>
          <TypographyText v-show={this.data.status == 2} strong type="warning">
            发票待签收
          </TypographyText>
          <TypographyText v-show={this.data.status == 6} strong type="success">
            发票已签收
          </TypographyText>
          <TypographyText v-show={this.data.status == 5} strong type="success">
            审核通过
          </TypographyText>
          <TypographyText v-show={this.data.status == 1} strong type="danger">
            驳回申请
          </TypographyText>
        </Space>
        <FormItem
          label="驳回理由"
          style={{ width: '500px' }}
          v-show={this.data.status == 1}
        >
          <TypographyText>{this.data.rejectReason}</TypographyText>
        </FormItem>
        <Descriptions bordered column={2}>
          <DescriptionsItem label="服务商名称">
            {this.data.purchaserName}
          </DescriptionsItem>
          <DescriptionsItem label="提交申请时间">
            {formatDate(this.data.submitTime)}
          </DescriptionsItem>
          <DescriptionsItem label="提现金额">
            {'￥' + this.data.amount}
          </DescriptionsItem>
          <DescriptionsItem label="发票凭证">
            <ImagePreviewGroup>
              <div>
                {this.data.invoices?.split(',').map(item => (
                  <Image style={{ height: '100px' }} src={item}></Image>
                ))}
              </div>
            </ImagePreviewGroup>
          </DescriptionsItem>
          <DescriptionsItem label="发票种类">
            {optionsToMap(billTypeOptions)[this.data.invoiceType]}
          </DescriptionsItem>
          <DescriptionsItem label="审核时间">
            {formatDate(this.data.checkTime)}
          </DescriptionsItem>
          {this.data.invoiceType == 1 || this.data.invoiceType == 2 ? (
            <DescriptionsItem label="快递单号">
              {this.data.logisticNo}
            </DescriptionsItem>
          ) : null}
          {this.data.invoiceType == 1 || this.data.invoiceType == 2 ? (
            <DescriptionsItem label="物流信息">
              {this.data.trace}
            </DescriptionsItem>
          ) : null}
          <DescriptionsItem label="结算月份">
            {this.data.withdrawDate}
          </DescriptionsItem>
          {this.data.status == 1 ? (
            <DescriptionsItem label="最新驳回时间">
              {formatDate(this.data.checkRejectTime)}
            </DescriptionsItem>
          ) : null}
          {this.data.status == 5 || this.data.status == 6 ? (
            <DescriptionsItem label="是否打款">
              <RadioGroup v-model:value={this.data.isPay}>
                {paymentOptions.map(item => {
                  return <Radio value={item.value}>{item.label}</Radio>
                })}
              </RadioGroup>
            </DescriptionsItem>
          ) : null}
          <DescriptionsItem label="备注">{this.data.comments}</DescriptionsItem>
        </Descriptions>
        <Divider></Divider>
        <Space v-show={!this.isPreview} style={{ marginBottom: '50px' }}>
          <Button
            v-show={this.data.status == 4}
            type="primary"
            onClick={this.handleReject}
          >
            驳回
          </Button>
          <Button
            v-show={this.data.status == 4}
            type="primary"
            onClick={this.handlePass}
          >
            通过
          </Button>
          <Button
            v-show={this.data.status == 2}
            type="primary"
            onClick={this.handleReceive}
          >
            确认签收
          </Button>
          <Button
            v-show={this.data.status == 6 || this.data.status == 5}
            type="primary"
            onClick={this.handleSave}
          >
            保存
          </Button>
        </Space>
        <FinanceRejectDialog
          ref="rejectDlgRef"
          onConfirm={this.handleRejectConfirm}
        ></FinanceRejectDialog>
      </Spin>
    )
  }
})
